<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport"
			content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>华容道求解</title>
		<script src="js/mui.min.js"></script>
		<link href="css/mui.min.css" rel="stylesheet" />
		<script type="text/javascript" charset="utf-8">
			mui.init();
		</script>
	</head>
	<body>
		<style>
			* {
				padding: 0;
				margin: 0;
				background-color: black;
				color: aliceblue;
			}

			canvas {
				background-color: black;
				width: 100vw;
				height: 125vw;

				/* border: 5px solid antiquewhite; */
			}
		</style>
		<div class="mui-content">
			<canvas width="400" height="500"></canvas>
			<div id="sheet" class="mui-popover mui-popover-bottom mui-popover-action ">
				<ul class="mui-table-view">
					<li class="mui-table-view-cell">
						<a>超快[0.5秒]</a>
					</li>
					<li class="mui-table-view-cell">
						<a>快速[1秒]</a>
					</li>
					<li class="mui-table-view-cell">
						<a>中速[2秒][默认]</a>
					</li>
					<li class="mui-table-view-cell">
						<a>慢速[4秒]</a>
					</li>
					<li class="mui-table-view-cell">
						<a>超慢[8秒]</a>
					</li>
				</ul>
				<!-- 取消菜单 -->
				<ul class="mui-table-view">
					<li class="mui-table-view-cell">
						<a>取消</a>
					</li>
				</ul>
			</div>
			<a href="#sheet" id="openSheet" class="mui-btn mui-btn-primary mui-btn-block">调速</a>
			<div>
				<button type="button" class="mui-btn mui-btn-red mui-btn-block">布局</button>
				<button type="button" class="mui-btn mui-btn-red mui-btn-block">初始</button>
				<button type="button" class="mui-btn mui-btn-red mui-btn-block">演示</button>
				<button type="button" class="mui-btn mui-btn-red mui-btn-block">停止</button>
			</div>
		</div>
	</body>
</html>

<script src="js/solve.js"></script>
<script>
	"use strict";

	let block_type = ["S", "H", "V", "B", "K"];
	let block_color = {
		S: "Orange",
		H: "Green",
		V: "Blue",
		B: "Firebrick",
		K: "Black"
	};
	let block_number = {
		S: 1,
		H: 2,
		V: 3,
		B: 4,
		K: 0
	};
	let blocks = [{
			bt: "V",
			x: 0,
			y: 0,
			w: 1,
			h: 2
		},
		{
			bt: "B",
			x: 0,
			y: 1,
			w: 2,
			h: 2
		},
		{
			bt: "V",
			x: 0,
			y: 3,
			w: 1,
			h: 2
		},
		{
			bt: "V",
			x: 2,
			y: 0,
			w: 1,
			h: 2
		},
		{
			bt: "H",
			x: 2,
			y: 1,
			w: 2,
			h: 1
		},
		{
			bt: "V",
			x: 2,
			y: 3,
			w: 1,
			h: 2
		},
		{
			bt: "S",
			x: 3,
			y: 1,
			w: 1,
			h: 1
		},
		{
			bt: "S",
			x: 3,
			y: 2,
			w: 1,
			h: 1
		},
		{
			bt: "S",
			x: 4,
			y: 0,
			w: 1,
			h: 1
		},
		{
			bt: "S",
			x: 4,
			y: 3,
			w: 1,
			h: 1
		}
	];
	let cookies = document.cookie.split(";");
	cookies.forEach((cookie, _) => {
		if (cookie.trim().startsWith("blocks=")) {
			blocks = JSON.parse(cookie.split("=")[1]);
		}
	});
	let canvas = document.querySelector("canvas");
	let solution = null;
	let delay = 2000;
	let pause = false;

	draw(canvas, blocks);

	function clear(canvas) {
		let context = canvas.getContext("2d");
		context.fillStyle = "black";
		context.fillRect(0, 0, canvas.width, canvas.height);
	}

	function draw(canvas, bs) {
		clear(canvas);
		let context = canvas.getContext("2d");
		bs.forEach((b, _) => {
			context.beginPath();
			context.fillStyle = block_color[b.bt];
			context.fillRect(b.y * 100, b.x * 100, b.w * 100, b.h * 100);
			context.closePath();

			context.beginPath();
			context.strokeStyle = "black";
			context.lineWidth = 1;
			context.rect(b.y * 100, b.x * 100, b.w * 100, b.h * 100);
			context.stroke();
			context.closePath();
		});
	}

	function show(canavs, solution, index) {
		if (solution == null) {
			mui.alert("无解");
			return;
		}
		let bs = solution[index].bs;
		draw(canvas, bs);
		if (index + 1 < solution.length) {
			if (pause) {
				pause = false;
				return;
			}
			setTimeout(() => {
				show(canvas, solution, index + 1);
			}, delay);
		} else {
			mui.toast("演示完成");
		}
	}

	mui("button").each((_, item) => {
		item.onclick = (e) => {
			switch (item.innerHTML) {
				case "布局":
					window.location.href = "layout.html";
					break;
				case "初始":
					pause = true;
					mui.toast(`${delay+1000}毫秒后回到初始局面`);
					setTimeout(() => {
						draw(canvas, blocks);
						mui.toast("已回到初始局面");
					}, delay + 1000);
					break;
				case "演示":
					if (solution == null) {
						solution = solve(blocks);
					}
					if (solution == null) {
						mui.toast("局面无解");
						return;
					}
					pause = false;
					show(canvas, solution, 0);
					break;
				case "停止":
					pause = true;
					break;
			}
		};
	});

	mui("a").each((_, item) => {
		item.onclick = (e) => {
			let text = item.innerHTML.substr(0, 2);
			switch (text) {
				case "超快":
					delay = 500;
					break;
				case "快速":
					delay = 1000;
					break;
				case "中速":
					delay = 2000;
					break;
				case "慢速":
					delay = 4000;
					break;
				case "超慢":
					delay = 8000;
					break;
			}
			mui("#sheet").popover("toggle");
		};
	});
</script>